import React, { Component } from "react";
import "./Tabbar.scss";
class App extends Component {
  state = {
    activeTab: "home",
    // 首页 => home
    // 分类 => category
    // 购物车 => cart
    // 我 => my
  };
  handleClick = (activeTab) => {
    // 1. 进行路由跳转
    this.props.history.push(activeTab);
    // 2. 样式的切换
    this.setState({
      activeTab,
    });
  };
  // 过滤不合法路径
  filterPath = (activeTab) => {
    let activeTabs = {
      home: true,
      category: true,
      cart: true,
      my: true,
    };
    // 过滤不合法的 path
    if (activeTabs[activeTab]) {
      return activeTab;
    } else {
      return "home";
    }
  };

  componentDidMount() {
    let activeTab = this.props.match.path.split("/")[1];
    // let _this = this;
    // let this$1 = this;
    // let that = this;
    let that = this;
    // 过滤不合法的路径
    activeTab = this.filterPath(activeTab);
    this.setState((prevState) => {
      return {
        activeTab,
      };
    });
    window.addEventListener("hashchange", function () {
      let activeTab = that.props.match.path.split("/")[1];
      // 过滤不合法的路径
      activeTab = that.filterPath(activeTab);
      that.setState((prevState) => {
        return {
          activeTab,
        };
      });
    });
  }

  render() {
    return (
      <div className="appTabbarContainer">
        {/* tabbar 对应的组件的显示开始 */}
        <div className="appTabbarContent">{this.props.children}</div>
        {/* tabbar 对应的组件的显示结束 */}
        <div className="appTabbar">
          <div
            className="appTabbarItem"
            onClick={this.handleClick.bind(this, "home")}
          >
            <i
              className={
                this.state.activeTab === "home"
                  ? "iconfont icon-shouye active"
                  : "iconfont icon-shouye"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "home" ? "title active" : "title"
              }
            >
              首页
            </span>
          </div>
          <div
            className="appTabbarItem"
            onClick={this.handleClick.bind(this, "category")}
          >
            <i
              className={
                this.state.activeTab === "category"
                  ? "iconfont icon-fenlei active"
                  : "iconfont icon-fenlei"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "category" ? "title active" : "title"
              }
            >
              分类
            </span>
          </div>
          <div
            className="appTabbarItem"
            onClick={this.handleClick.bind(this, "cart")}
          >
            <i
              className={
                this.state.activeTab === "cart"
                  ? "iconfont icon-gouwuche active"
                  : "iconfont icon-gouwuche"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "cart" ? "title active" : "title"
              }
            >
              购物车
            </span>
          </div>
          <div
            className="appTabbarItem"
            onClick={this.handleClick.bind(this, "my")}
          >
            <i
              className={
                this.state.activeTab === "my"
                  ? "iconfont icon-wode active"
                  : "iconfont icon-wode"
              }
            ></i>
            <span
              className={
                this.state.activeTab === "my" ? "title active" : "title"
              }
            >
              我的
            </span>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
